<script setup>
import { ref } from 'vue';

const message = ref(''); // 用户输入的消息，默认为空
const response = ref(''); // 服务器返回的响应内容
const isStreaming = ref(false); // 是否正在接收流
const error = ref(null); // 错误信息
const eventSource = ref(null); // EventSource 实例

// 开始流式对话
const startStream = async () => {
  if (!message.value.trim()) {
    error.value = '请输入您的问题。';
    response.value = ''; // 清空旧的响应
    return;
  }
  isStreaming.value = true;
  response.value = ''; // 清空之前的对话内容
  error.value = null;   // 清空之前的错误信息

  try {
    eventSource.value = new EventSource(
      `http://localhost:8080/api/chat/stream?message=${encodeURIComponent(message.value)}`
    );

    eventSource.value.onopen = () => {
      console.log("EventSource connection opened.");
      // 可以在这里决定是否清空输入框:
      // message.value = '';
    };

    eventSource.value.onmessage = (event) => {
      if (event.data === "[DONE]") {
        response.value += `\n[对话正常结束]`;
        stopStreamInternally();
        return;
      }
      response.value += event.data;
    };

    eventSource.value.onerror = (errEvent) => {
      // 如果流已停止或 eventSource 不存在，则忽略错误
      if (!isStreaming.value || !eventSource.value) {
        console.log("EventSource error ignored as streaming is already stopped or source is null.");
        return;
      }
      console.error('EventSource failed:', errEvent);
      // 避免覆盖用户主动终止时设置的 error.value
      if (!(error.value && error.value.includes('用户主动终止'))) {
        let specificError = '连接错误，请检查服务端或网络。';
        if (eventSource.value && eventSource.value.readyState === EventSource.CLOSED) {
          specificError = '连接已丢失或被服务器关闭。';
        }
        error.value = specificError;
      }
      stopStreamInternally();
    };

  } catch (err) {
    console.error('Error starting stream:', err);
    error.value = '启动连接失败: ' + (err.message || '未知错误');
    isStreaming.value = false; // 确保状态更新
    if (eventSource.value) {
      eventSource.value.close(); // 尝试关闭以释放资源
      eventSource.value = null;
    }
  }
};

// 内部停止流的方法 (用于正常结束或错误)
const stopStreamInternally = () => {
  if (eventSource.value) {
    eventSource.value.onopen = null;
    eventSource.value.onmessage = null;
    eventSource.value.onerror = null;
    eventSource.value.close();
    eventSource.value = null;
  }
  isStreaming.value = false;
};

// 用户主动停止流
const stopStreamUser = () => {
  if (isStreaming.value && eventSource.value) {
    error.value = '用户主动终止对话'; // 设置错误信息，将显示在UI上
    stopStreamInternally();
    // 可以在 response 中也追加一条用户终止的提示
    if (response.value && !response.value.endsWith('[用户主动终止对话]')) {
      response.value += `\n[用户主动终止对话]`;
    } else if (!response.value) {
      response.value = `[用户主动终止对话]`;
    }

  } else {
    // 如果不是在流式传输中，也确保状态正确
    isStreaming.value = false;
    if (eventSource.value) { // 防御性关闭
      eventSource.value.close();
      eventSource.value = null;
    }
  }
};

// 切换流状态 (按钮点击处理)
const toggleStream = () => {
  if (isStreaming.value) {
    stopStreamUser();
  } else {
    startStream();
  }
};
</script>

<template>
  <div class="chat-container">
    <div class="input-area">
      <input v-model="message" placeholder="输入你的问题" :disabled="isStreaming" @keyup.enter="isStreaming ? null : startStream()" />
      <button
        @click="toggleStream"
        class="chat-action-button"
        :class="{ 'streaming': isStreaming }"
        :title="isStreaming ? '停止对话' : '开始对话'"
      >
        <span v-if="!isStreaming">
          <!-- 开始/发送图标 (向上箭头/纸飞机) -->
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"></path></svg>
        </span>
        <span v-else>
          <!-- 停止图标 (方形) -->
          <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M6 18h12V6H6v12zM8 8h8v8H8V8z"></path></svg>
        </span>
      </button>
    </div>

    <div v-if="error" class="error">{{ error }}</div>

    <div class="response-box">
      <pre>{{ response }}</pre>
    </div>
  </div>
</template>

<style scoped>
.chat-container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #3e444c; /* 深色主题边框 */
  border-radius: 8px;
  font-family: sans-serif;
  background-color: #2d333b; /* 深色背景 */
  color: #c9d1d9; /* 浅色文字 */
}

.input-area {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.input-area input {
  flex-grow: 1;
  padding: 10px 12px;
  border-radius: 20px; /* 更圆润的输入框 */
  border: 1px solid #4a5058;
  background-color: #22272e; /* 输入框背景 */
  color: #c9d1d9; /* 输入框文字颜色 */
  margin-right: 10px;
  font-size: 1em;
}
.input-area input:focus {
  outline: none;
  border-color: #409eff;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.3);
}
.input-area input:disabled {
  background-color: #373e47;
  cursor: not-allowed;
}

.chat-action-button {
  width: 40px;
  height: 40px;
  border-radius: 50%; /* 圆形按钮 */
  background-color: #409eff; /* 默认蓝色 (开始) */
  color: white; /* 图标颜色 */
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  transition: background-color 0.3s ease, transform 0.1s ease;
  flex-shrink: 0; /* 防止按钮被压缩 */
}

.chat-action-button:hover {
  opacity: 0.9;
}
.chat-action-button:active {
  transform: scale(0.95);
}

.chat-action-button.streaming {
  background-color: #ff4d4f; /* 红色 (停止) */
}

.chat-action-button svg {
  width: 20px; /* 控制SVG图标大小 */
  height: 20px;
}

.error {
  color: #ff7b72; /* 错误文字颜色 */
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #ff4d4f;
  border-radius: 4px;
  background-color: rgba(255, 77, 79, 0.1); /* 错误背景 */
}

.response-box {
  border: 1px solid #4a5058; /* 响应框边框 */
  padding: 12px;
  min-height: 100px;
  background-color: #22272e; /* 响应框背景 */
  border-radius: 8px;
  /* white-space: pre-wrap; (已存在，且会被 pre 继承或覆盖) */
  /* word-wrap: break-word; (已存在，且会被 pre 继承或覆盖) */
  font-size: 0.95em;
  line-height: 1.6;
  /* 注意: white-space 和 word-wrap/overflow-wrap 在 pre 元素上设置更直接有效 */
}

.response-box pre {
  margin: 0;
  font-family: inherit;
  color: #adbac7; /* 响应文字颜色 */
  white-space: pre-wrap;   /* 新增/确保：保留空白符序列，但允许正常换行 */
  overflow-wrap: break-word; /* 新增/确保：在单词内换行以防止溢出 (标准属性) */
  word-wrap: break-word;     /* 新增/确保：兼容旧浏览器的 overflow-wrap */
}
</style>
